<template>
  <div>
    <Subject
      :returnTop="returnTop"
      :btnTitle="'新增目录'"
      :search_title_1="'目录名称'"
      :search_title_2="'状态'"
      :counts="counts"
      :pageSize="pagesize"
      @currentPage="handelCurrentPage"
      @sizeChange="handelSizeChange"
      @addSubBtn="handelAddSubBtn"
      @searchSelect="handelSearchSelect"
      @search="handelSearch"
    >
      <template #table>
        <el-table :data="dirList">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
          ></el-table-column>
          <el-table-column
            prop="directoryName"
            label="目录名称"
          ></el-table-column>
          <el-table-column prop="username" label="创建者"></el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default="{ row }">
              <span>{{ row.addDate | dateformat }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"></el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            :formatter="handelForm"
          ></el-table-column>
          <el-table-column prop="操作">
            <template #default="{ row }">
              <el-button type="text" @click="state(row)">{{
                stateShow
              }}</el-button>
              <el-button type="text" @click="change(row)">修改</el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </Subject>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handelClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="所属学科">
          <!-- 下拉 -->
          <el-select
            style="width: 340px"
            v-model="form.subjectName"
            placeholder="请选择"
            @focus="handleFocus"
            @change="selectChange"
          >
            <el-option
              v-for="item in dirList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.subjectID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            placeholder="请输入目录名称"
            v-model="form.directoryName"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { status } from "@/api/hmmm/constants";
import Subject from "@/components/Subject";
import {
  getDirectorysInfo,
  editDirectorys,
  addDirectorys,
  delDirectorys,
  searchDirectorys,
  editState,
} from "@/api/subject";
export default {
  components: {
    Subject,
  },
  data() {
    return {
      btnTitle: "",
      title: "",
      query: {
        directoryName: null,
        state: null,
        page: 1,
        pagesize: 10,
        subjectID: null,
      },
      counts: null,
      pagesize: null,
      dirList: [],
      dialogVisible: false,
      form: {
        id: "",
        subjectID: "",
        subjectName: null,
        directoryName: null,
      },
      rules: {
        directoryName: [{ required: true, message: "目录名称不能为空" }],
      },
      stateShow: "启用",
      returnTop: false,
    };
  },
  created() {
    this.getDirectorysInfo();
  },
  methods: {
    async getDirectorysInfo() {
      // 如果是跳转过来的，拿着id去渲染页面，否则原始数据渲染
      if (this.$route.query.id) {
        this.returnTop = true;
        this.query.subjectID = this.$route.query.id;
      } else {
        this.query.subjectID = null;
      }
      const { data } = await getDirectorysInfo(this.query);
      this.counts = data.counts;
      this.pagesize = +data.pagesize;
      this.dirList = data.items;
    },
    async handelCurrentPage(val) {
      this.query.page = val;
      this.getDirectorysInfo();
    },
    // 每页显示数改变视图更新
    handelSizeChange(size) {
      this.query.pagesize = size;
      this.getDirectorysInfo();
    },
    // 点击新增学科按钮，显示弹出框
    handelAddSubBtn() {
      this.title = "新增学科";
      this.dialogVisible = true;
    },
    // 弹出框的下拉列表
    async handleFocus() {
      this.query.pagesize = 99999;
      this.getDirectorysInfo(this.query);
    },
    // 搜索框下拉菜单获取的值，是number的值
    async handelSearchSelect(value) {
      this.query.state = value;
    },
    // 第一个搜索框内容和点击提交，回车提交函数
    async handelSearch(searchForm) {
      console.log(23333);
      this.query.directoryName = searchForm.input1;
      await searchDirectorys(this.query);
      this.getDirectorysInfo();
      searchForm.input1 = "";
      searchForm.input2 = "";
    },
    // 关闭弹框
    handelClose() {
      this.$refs.form.resetFields();
      this.form = {
        subjectName: "",
        directoryName: "",
      };
    },
    // 点击修改
    change(row) {
      this.title = "修改目录";
      this.dialogVisible = true;
      // 回显
      console.log(row);
      this.form.id = row.id;
      this.form.subjectName = row.subjectName;
      this.form.directoryName = row.directoryName;
      this.form.subjectID = row.subjectID;
    },
    // 当option改变的时候，此事件可以获取学科的id值，也是option的value
    selectChange(value) {
      this.form.subjectID = value;
    },
    // 提交确认按钮
    async submit() {
      try {
        await this.$refs.form.validate();
        if (this.title === "修改目录") {
          this.query = await editDirectorys(this.form);
          this.getDirectorysInfo();
          this.$message.success("修改成功");
        } else {
          await addDirectorys(this.form);
          this.getDirectorysInfo();
          this.$message.success("新增成功");
        }
      } catch (error) {
        console.log(error);
      } finally {
        this.dialogVisible = false;
        this.form = {};
      }
    },
    // 删除
    async del(id) {
      await this.$confirm("此操作将永久删除该目录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await delDirectorys(id);
      this.getDirectorysInfo();
      this.$message.success("删除成功");
    },
    // 禁用启用状态格式化
    handelForm(row, column, cellValue, index) {
      // 要去找 1所对应的值
      const obj = status.find((item) => item.value === row.state);
      return obj ? obj.label : "未知";
    },
    // 点击启用，禁用状态取反，其余按钮禁止
    async state(row) {
      this.stateShow = this.stateShow === "启用" ? "禁用" : "启用";
      // console.log(row)
      const data = {
        id: row.id,
        state: row.state === 0 ? 1 : 0,
      };
      const res = await editState(data);
      console.log(res);
      this.getDirectorysInfo();
      this.$message.success("状态修改成功");
    },
  },
};
</script>

<style scoped lang="scss"></style>
